<template>
  <ul class="portVlanDiagram">
    <li class="diagramLi" style="margin-right: 40px">
      <p class="txt">
        {{ $t('businessNet.selecttop')
        }}<span class="lightTxt">{{ $t('businessNet.clicktoselect') }}</span
        >{{ $t('businessNet.linedevice')
        }}<span class="lightTxt">{{ $t('businessNet.device') }}</span>
      </p>
      <img class="diagramImg" :src="portVlanImg1" alt="" />
    </li>
    <li class="diagramLi">
      <p class="txt">
        {{ $t('businessNet.inplane') }}
        <span class="lightTxt">{{ $t('businessNet.clickenter') }}</span
        >{{ $t('businessNet.switchwan') }}
      </p>
      <img class="diagramImg" :src="portVlanImg2" alt="" />
    </li>
  </ul>
</template>
<script>
import { maccApi, requestHttp } from '@utils/index';
export default {
  name: 'componentName',
  props: {},

  data() {
    return {
      portVlanImg1:
        process.env.VUE_APP_COMMON_IMG_PATH + '/businessNet/portVlanImg1.png',
      portVlanImg2:
        process.env.VUE_APP_COMMON_IMG_PATH + '/businessNet/portVlanImg2.png',
    };
  },

  components: {},

  watch: {},

  methods: {},
};
</script>

<style lang="less" scoped>
.portVlanDiagram {
  padding: 0 16px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  box-sizing: border-box;
  .diagramLi {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .txt {
    margin-bottom: 10px;
    text-align: left;
  }
  .lightTxt {
    color: #2b6afd;
  }
  .diagramImg {
    width: 100%;
    height: auto;
  }
}
</style>
